<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>

<body>
  <div>
    <button id="btn">点击按钮</button>
    <div id="list-container"></div>
  </div>
</body>
<script>
  // 定义示例数据
  var data = [
    {
      label: '列表项1',
      children: [
        {
          label: '下一级列表项1',
          children: [
            { label: '第三级列表项1' },
            { label: '第三级列表项2' }
          ]
        },
        { label: '下一级列表项2' }
      ]
    },
    {
      label: '列表项2',
      children: [
        {
          label: '下一级列表项3',
          children: [
            { label: '第三级列表项3' },
            { label: '第三级列表项4' }
          ]
        },
        { label: '下一级列表项4' }
      ]
    }
  ]

  // 点击按钮的处理函数
  $('#btn').click(function () {
    var listContainer = $('#list-container')
    var list = $('<ul>').appendTo(listContainer)

    // 创建并插入列表项
    $.each(data, function (index, item) {
      var listItem = $('<li>').text(item.label).appendTo(list)
      listItem.click(function () {
        // 检查是否有子列表
        if (item.children && item.children.length > 0) {
          var subList = $('<ul>').appendTo($(this))

          // 创建并插入下一级列表项
          $.each(item.children, function (childIndex, childItem) {
            var subListItem = $('<li>').text(childItem.label).appendTo(subList)

            // 检查是否有第三级列表
            if (childItem.children && childItem.children.length > 0) {
              var thirdList = $('<ul>').appendTo(subListItem)

              // 创建并插入第三级列表项
              $.each(childItem.children, function (thirdIndex, thirdItem) {
                $('<li>').text(thirdItem.label).appendTo(thirdList)
              })
            }
          })
        }
      })
    })
  });
</script>

</html>